<!DOCTYPE html>
<html>
<head>
<!--
  Copyright (c) 2015-2021 Jean-Marc VIGLINO,
  released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
-->
  <title>ol-ext: inputs!</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <meta name="description" content="Animated canvas Overlay for Openlayers" />
  <meta name="keywords" content="openlayers, ol, input, color, checkbox, width, pattern" />

  <meta name="msapplication-tap-highlight" content="no" />
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />

  <!-- jQuery -->
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
  <!-- FontAwesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <!-- Openlayers -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@latest/ol.css" />
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ol@latest/dist/ol.js"></script>

  
  <!-- ol-ext -->
  <link rel="stylesheet" href="../../dist/ol-ext.css" />
  <script type="text/javascript" src="../../dist/ol-ext.js"></script>
  <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
  <script src="https://unpkg.com/elm-pep"></script>
  
  <link rel="stylesheet" href="../style.css" />
  <style>
    body {
     user-select: none; 
    }
    .ol-input-popup.marker li > * {
      background-color: transparent;
      width: .6em;
    }
    .marker li > *:before {
      content: "\f041";
      font-family: FontAwesome;
      color: #369;
    }
    .ol-ext-dialog .ol-content {
      padding: .5em;
    }
    /* Arrow style */
    .ol-input-popup.arrow i {
      position: relative;
      display: block;
      width: 100px;
      color: #369;
      background-color: currentColor;
      height: 2px;
    }
    .ol-input-popup.arrow > div > i {
      display: inline-block;
      vertical-align: middle;
      width: 40px;
    }
    .ol-input-popup.arrow i:before,
    .ol-input-popup.arrow i:after {
      content: "";
      position: absolute;
      border: 0 solid transparent;
      border-color: transparent currentColor;
      top: 50%;
      transform: translateY(-50%);
    }
    .ol-input-popup.arrow i.arrow1:before {
      border-width: 5px 0 5px 10px;
      right: 0;
    }
    .ol-input-popup.arrow i.arrow-1:before {
      border-width: 5px 10px 5px 0;
      left: 0;
    }
    .ol-input-popup.arrow i.arrow2:before {
      border-width: 5px 0 5px 10px;
      right: 0;
    }
    .ol-input-popup.arrow i.arrow2:after {
      border-width: 5px 10px 5px 0;
      left: 0;
    }
  </style>

</head>
<body >
  <a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>

  <a href="../../index.html">
    <h1>ol-ext: input!</h1>
  </a>

  <p>
    Switch: <input class="switch" type="checkbox" />
  </p><p>
    <input class="check" type="checkbox" />
  </p>
    <input class="radio" type="radio" name="radio" value=1 />
    <input class="radio" type="radio" name="radio" value=2 />
  </p><p style="overflow: hidden; padding: 1em 0;">
    Color: <input class="color1" />
  </p><p>
    <button onclick="dialog.show()">Color dialog</button>
  </p><p style="border: 1px solid #999; border-width: 1px 0; padding: .5em 0;">
    Color (inline): 
    <span class="color" style="display: inline-block; background-color: red; width: 2.5em; height: 1.5em; vertical-align: middle;"></span>
    <input class="color2" />
  </p><p>
    Slider: 
    <span class="opacity" style="display: inline-block; background-color: red; width: 2.5em; height: 1.5em; vertical-align: middle;"></span>
    <input class='slider' type="number" style="width: 3em" value=25 min=0 max=100 />
  </p><p>
    Size: 
    <i class="fa fa-map-marker" style="line-height: 60px; width: 60px; text-align: center; vertical-align: middle;"></i> 
    <input class="slide2" type="number" style="width: 3em" value=50 min=20 max=80 />
  </p><p>
    Size:
    <i class="fa fa-map-pin" style="line-height: 60px; width: 60px; text-align: center; vertical-align: middle;"></i> 
    <input class="size" type="number" style="width: 3em" />
  </p><p>
    Size (styled):
    <input class="size2" type="number" style="width: 3em" />
  </p><p>
    Width: 
    <span class="line" style="display: inline-block; background-color: red; width: 2.5em; vertical-align: middle;"></span>
    <input class="width" type="number" style="width: 3em" value=8 />
  </p><p>
    Arrow: 
    <input class="arrow" value=1 type="number" min="-1" max="2"/>
  </p><p>
    Popup:
    <input class="popup" value=1 />
  </p><p>
    Range:
    <input type="number" class="range" style="width: 3em" value=1 min=0 max=20 />
  </p><p>
    Range2:
    <input type="number" class="range2" style="width: 3em" value=5 min=0 max=20 step=".1" />
    <input type="number" class="range2" style="width: 3em" value=12 min=0 max=20 />
  </p>
  <p style="height:3em;"></p>


<script type="text/javascript">

  /* A dialog with a color input */ 
  var fakeMap = new ol.Map();  
  var dialog = new ol.control.Dialog({ fullscreen: true, buttons: ['cancel'] });
  fakeMap.addControl(dialog);
  dialog.setContent({
    title: 'Color',
    content: 'Color : '
  });
  var inputColor = new ol.ext.input.Color({ position: 'fixed', parent: dialog.getContentElement() })

  /* Set inputs */
  var switcher = new ol.ext.input.Switch({ input: $('.switch').get(0), html: 'off', after: 'on' });

  var checkbox = new ol.ext.input.Checkbox({ input: $('.check').get(0), html: 'Checkbox:', after: 'on' });
  $('.radio').each(function(i) {
    window['radio'+(i+1)] = new ol.ext.input.Radio({ input: this, html: i ? '' : 'Radio:', after: 'radio '+(i+1), checked: !i });
  });

  var slider = new ol.ext.input.Slider({ input: $('.slider').get(0) });
  slider.on('change:value', function(e) {
    $('.opacity').css('opacity', e.value/100);
  });
  slider.setValue(25);
  
  var slide2 = new ol.ext.input.Slider({ input: $('.slide2').get(0), type: 'size' });
  slide2.on('change:value', function(e) {
    $('.fa-map-marker').css('font-size', e.value+'px');
  });
  slide2.setValue(50);

  var cpicker = new ol.ext.input.Color({ 
    input: $('.color1').get(0), 
    color: 'red', 
    position: 'fixed', 
    hidden: true,
    opacity: false,
    hastab: true 
  });
  cpicker.on('color', function(e) { console.log('Color:', e.color) })

  var cpicker2 = new ol.ext.input.Color({ input: $('.color2').get(0), position: 'inline' });
  cpicker2.on('color', function(e) { 
    $('.color').css('background-color', ol.color.asString(e.color));
  });
  cpicker2.setColor('#f90');

  var size = new ol.ext.input.Size({ input: $('.size').get(0), fixed: false });
  size.on('change:value', function(e) {
    $('.fa-map-pin').css('font-size', e.value+'px');
  });
  size.setValue(8);

  var size2 = new ol.ext.input.Size({ input: $('.size2').get(0), className: 'marker' });
  size2.setValue(8);

  var width = new ol.ext.input.Width({ input: $('.width').get(0), fixed: false });
  width.on('change:value', function(e) {
    $('.line').height(e.value)
  })
//  width.setValue(8);

  // An arrow list
  var arrow = new ol.ext.input.List({ 
    input: $('.arrow').get(0),
    className: 'arrow',
    //disabled: true,
    hidden: true,
    //align: 'middle',
    options: [{
      value: 2,
      title: 'both',
      html: '<i class="arrow2"></i>'
    },{
      value: 1,
      title: 'direct',
      html: '<i class="arrow1"></i>'
    },{
      value: 0,
      title: 'none',
      html: '<i class="arrow0"></i>'
    },{
      value: -1,
      title: 'revers',
      html: '<i class="arrow-1"></i>'
    }]
  });
  arrow.on('change:value', function(e) {
    // console.log(e.value)
  });

  var popup = new ol.ext.input.PopupBase({ 
    input: $('.popup').get(0),
    disabled: true,
  });

  var range = new ol.ext.input.Range({ 
    input: $('.range').get(0),
  });
  var range2 = new ol.ext.input.Range({ 
    input: $('.range2').get(0),
    input2: $('.range2').get(1),
    overflow: true
  });

</script>
  
</body>
</html>